<%@ page import="com.macrosolution.exdebito.Message"%>
<%! import grails.converters.JSON %>
<!DOCTYPE html>
<html>

<head>
<meta name="layout" content="kickstart" />

<title><g:message code="Calendario Messaggi" /></title>
<style type="text/css">

.datepicker{z-index:1151 !important;}

</style>
<%--<link rel="stylesheet" href="${resource(dir: 'site/css', file: 'fullcalendar.min.css')}" type="text/css">--%>
<%--<script src="${resource(dir: 'site/js', file: 'moment.min.js')}"></script>--%>
<script	src="${resource(dir: 'site/js/plugin/fullcalendar', file: 'jquery.fullcalendar.min.js')}"></script>
	
<%--	<script src="${resource(dir: 'site/js/plugin/fullcalendar/lang', file: 'it.js')}"></script>	--%>
<script type="text/javascript">
	var d = new Date();
	
$(document).ready(function() {
				
<%-- Date evento--%>
	var dateEnd =$("#end-datepicker").datepicker({
	  	autoclose:"true", 
		format:"dd/mm/yyyy"
	});
		dateEnd.on('changeDate', function(e){
		var date = $(this).datepicker('getDate');
		
		var dateVal = $.datepicker.formatDate('dd/mm/yy', date);
			$('#dEnd').val(dateVal);
			$('#dEnd').change();
		});			
<%--date evento fine--%>
			pageSetUp();
					
			var calendar = $('#calendar').fullCalendar({
				
				header: { center: 'month,agendaWeek,agendaDay' },
				views: {
			        month: { // name of view
			            titleFormat: 'YYYY, MM, DD'
			            // other view-specific options here
			        }
			    },				 
				 eventSources: [
				                // your event source
				                {
				                    url: '/message/renderJsonMessage',
				                    type: 'POST',
				                    data: {

				                    },
				                    error: function() {
				                        alert('Non riusciamo a recuperare i suoi messaggi,riprovare più tardi!');
				                    }
				                    
				                }
				            ],
				   loading: function(bool) {
			                if (bool) $('#pageLoader').fadeIn();
			                else $('#pageLoader').fadeOut();
				           
 					},
					eventClick: function(callEvent	, jsEvent, view) {				
<%--						window.location.href = '/message/show?id='+callEvent.id;--%>				       
				        $(this).css('background-color', 'red');
				        ${remoteFunction(
							controller:'message',
							type:'POST',
							action:'messageDetail',
							params: '\'id=\'+callEvent.id',
							update: [success: 'mesviewpp'],
							onComplete:'$("#detail_message").modal()'					
						)}		
				    },
				});

			 var hdr = {
			        left: 'title',
			        center: 'month,agendaWeek,agendaDay',
			        right: 'prev,today,next'
			    };
			 loadAppenings();			
		});


		function loadAppenings(){

			${remoteFunction(
				action:'loadAppenings',
				controller:'message',
				type:'POST',
				update: [success: 'appenings', failure: 'daImp'],
				onLoading:'loadApp(true)',
				onComplete:'loadApp(false)'		
			)};
		}
		
		function loadApp(status){
			if(status){
				$('#appeningLoader').fadeIn();				
			}else{
				$('#appeningLoader').fadeOut();
			}
		}
	
		function detail_loader(status){			
			if(status){
				$('#detailLoader').fadeIn();				
			}else{
				$('#detailLoader').fadeOut();			
			}
		}
		
		function successAddEvent(data,txs){

			$.smallBox({
				title : data,
				color : "#3F8DBF",
				sound:false,
				timeout: 3000
			});
			
			$('#calendar').fullCalendar( 'refetchEvents' );
			$('#add_message').modal('hide');
			loadAppenings();
		}

		function successDeleteEvent(data,txs){

			$.smallBox({
				title : data,
				color : "#3F8DBF",
				sound:false,
				timeout: 3000
			});
			$('#calendar').fullCalendar( 'refetchEvents' );
			$('#message_detail').empty();
			$('#detail_message').modal('hide');			
		}
		
		function failureAddEvent(a,b,c){

			$.smallBox({
				title : a.responseText,
				color : "#c26565",
				sound:false,
				timeout: 3000
			});			
		}
		
		function failureDeleteEvent(a,b,c){

			$.smallBox({
				title : a.responseText,
				color : "#c26565",
				sound:false,
				timeout: 3000
			});			
		}

		function loadButt(id,status){
			if(status==true){
				$('#'+id).button('loading');				
			}else{
				$('#'+id).button('reset');
			}
		}

		function show_add_user(){
			
			${remoteFunction(
					asynchronous:false,
					controller:'message',
					action:'shadduspup',
					type:'POST',
					update: [success: 'mespp', failure: 'get'],
				  	onSuccess:'$("#add_message").modal()',
					onLoading:'',
					onFailure:'showCancelResponse(XMLHttpRequest,textStatus,errorThrown)',
					onComplete:''
				)}
		}

		function validate(){		
						
						
							$.validator.addMethod('italiandate', function (value) {		
							       return /^(0?[1-9]|[12][0-9]|3[01])[\/\-](0?[1-9]|1[012])[\/\-]\d{4}$/.test(value) || /^$/.test(value);;		
							}, 'Inserire una data valida (gg/mm/aaaa)');		
						
							$('#messageForm').validate({		
						
								rules: {		
						
								    eventTitle: {		
								        required: true		
						
								    },		
						    		dStart:{		
						
						    			required: false,		
								    	italiandate:true,		
						
						        	},		
						        	dEnd:{		
						
						        		required: false,		
								    	italiandate:true,		
						
						            }		
								},		
								messages: {		
									eventTitle:{		
								      	required:"Bisogna spedificare il nome dell'evento",		
						
								    },		
								    dEnd:{		
								    	required:"Bisogna specificare la data di inizio dell'evento",		
								    	italiandate:"Inserire una data valida"		
									},		
								    dStart:{		
						
										required:"Bisogna specificare la data di fine dell'evento",		
										italiandate:"Inserire una data valida"		
									}		
								},		
								highlight: function (element) {		
								      $(element).closest('.form-group').removeClass('has-success').addClass('has-error');		
								    },		
								    unhighlight: function (element) {		
								      $(element).closest('.form-group').removeClass('has-error').addClass('has-success');		
								    },		
								    errorElement: 'span',		
								    errorClass: 'help-block',		
								    errorPlacement: function (error, element) {		
								      if (element.parent('.input-group').length) {		
								        error.insertAfter(element.parent());		
								      } else {		
								        error.insertAfter(element);		
								      }		
								    },		
								    invalidHandler: function(form, validator) {		
										$("#validity_label").html('<i class="fa-fw fa fa-warning"></i>Ci sono '+validator.numberOfInvalids()+' infomazion'+(validator.numberOfInvalids()>1?'i':'e')+' mancant'+(validator.numberOfInvalids()>1?'i':'e'));		
										$("#validity_label").show();		
									}		
							});		
						
							var $valid = $("#messageForm").valid();		
							if (!$valid) {		
						        $validator.focusInvalid();		
						        throw new Error('step is invalid');		
							}		
						}
function deleteEvent(evId){

	$.SmartMessageBox({
		title : "<div class='row'><div class='col-md-2'><i class='fa '></i></div><div class='col-md-10'>Sei Sicuro di voler eliminare questo Evento?</div>",
		content : "<div class='col-md-2'></div><div class='col-md-10'> <BR/><BR/></div></div>",
		buttons:"[Si],[No]",
		sound:false
	}, function(ButtonPressed, Value) {
		if (ButtonPressed === "No") {
			
		}
		if (ButtonPressed === "Si") {
			${remoteFunction(asynchronous: true,
 					action:'delete_event',
					controller:'message',
					onLoading:'loadButt("btn_delete",true)',
					onComplete:'loadButt("btn_delete",false)',
					params:'\'event_id=\'+evId',
					onFailure:'failureDeleteEvent(XMLHttpRequest,textStatus,errorThrown);loadButt("btn_delete",false)',
					onSuccess:'successDeleteEvent(data,textStatus);loadButt("btn_delete",false);loadAppenings()'
					
					)} 
		}
		});
}
		
</script>

</head>

<body>
	<div id="ribbon">
		<div class="col-lg-5 col-md-5 col-sm-3 hidden-xs">
			<!-- breadcrumb -->
			<ol class="breadcrumb">
				<li>Home</li>
				<li>Agenda</li>
			</ol>
			<ol align="right">
			</ol>
		</div>
		<div class="col-lg-7 col-md-7 col-sm-4 hidden-xs" align="right" style="margin-top:2px;">
					<a href="https://support.google.com/chrome/answer/95346?hl=it" target="_blank">
						<h7 align="right" style="color:grey;">Sistema Ottimizzato per Chrome 
							<img style="width: 32;" class="" src="${resource(dir: 'images',file: 'chrome_download.png')}"/>
						</h7>
					</a>
		</div>
		<div class="hidden-lg hidden-md hidden-sm col-mxs-2" align="left" style="margin-top:2px;">
					<h8 align="left" style="color:grey;">Agenda &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
					<a href="https://support.google.com/chrome/answer/95346?hl=it" target="_blank"> 
							<img style="width: 32;" class="" src="${resource(dir: 'images',file: 'chrome_download.png')}"/>
					</a> </h8>
		</div>

	</div>
	
	<div id="content">
		<div class="row">
			<div class="col col-md-12" style="margin-top:10px;">
<%--				<button type="button" class="btn btn-primary pull-right" data-toggle="modal" data-target="#add_message" --%>
<%--					>Crea Evento--%>
<%--				</button>--%>
				<button type="button" class="btn btn-primary pull-right" onclick="show_add_user()"
					>Crea Evento
				</button>
			</div>

			<div class="col col-md-3 col-md-offst-1" style="display: none">
			</div>
		</div>
	<br>

		<div class="row">
			<div class="col col-md-8">
				<!-- new widget -->
				<div class="jarviswidget jarviswidget-color-blueDark">
					<header>
						<span class="widget-icon"> <i class="fa fa-calendar" style=" margin-top: 10px;"></i>
						</span> <span class="jarviswidget-loader" id="jw"><i
							class="fa fa-refresh fa-spin"></i></span>
						<h2>Calendario</h2>
						<div class="widget-toolbar">
							
							<i id="pageLoader" style="display: none"
								class="fa fa-gear fa-2x fa-spin"></i>
						</div>
					</header>
					<!-- widget div-->
					<div>
						<div class="widget-body no-padding">
							<!-- content goes here -->
							<div class="widget-body-toolbar"></div>
							<div id="calendar"></div>

							<!-- end content -->
						</div>
					</div>
					<!-- end widget div -->
				</div>
				<!-- end widget -->
			</div>

			<%--inizion widget sx--%>
			<div class="col-sm-12 col-md-4">
				<div class="jarviswidget jarviswidget-color-greenDark"
					id="wid-id-18" data-widget-colorbutton="false"
					data-widget-editbutton="false">
					<header>
						<h2>
							<strong>Prossimi eventi</strong>
						</h2>
						<div class="widget-toolbar">
							<i id="appeningLoader" style="display: none"
								class="fa fa-gear fa-2x fa-spin"></i>
						</div>
					</header>

					<!-- widget div-->
					<div>
						<!-- widget edit box -->
						<div class="jarviswidget-editbox">
							<!-- This area used as dropdown edit box -->
							<input class="form-control" type="text"> <span
								class="note"><i class="fa fa-check text-success"></i>
								</span>
						</div>
						<!-- end widget edit box -->
						<!-- widget content -->
						<div class="widget-body">
							<%--										Ultimi eventi--%>
							<div class="custom-scroll" style="opacity: 1;">
								<ul class="notification-body" id="appenings">
								</ul>
							</div>
							<%--										Ultimi eventi--%>
						</div>
						<!-- end widget content -->
					</div>
					<!-- end widget div -->
				</div>
				<!-- end widget -->
				<!-- new widget -->
<%--				<div class="jarviswidget jarviswidget-color-blueDark">--%>
<%--					<header>--%>
<%--						<h2>Dettaglio Evento</h2>--%>
<%--						<div class="widget-toolbar">--%>
<%--							<i id="detailLoader" style="display: none"--%>
<%--								class="fa fa-gear fa-2x fa-spin"></i>--%>
<%--						</div>--%>
<%--					</header>--%>

					<!-- widget div-->
<%--					<div>--%>
<%----%>
<%--						<div class="widget-body" id="body_message_detail">--%>
<%--							<!-- content goes here -->--%>
<%--							<!-- end content -->--%>
<%--						</div>--%>
<%----%>
<%--					</div>--%>
					<!-- end widget div -->
<%--				</div>--%>
				<!-- end widget -->
			</div>
			<%--fine widget sx--%>
		</div>
	</div>

	
<div id="mespp">	
<%--	<g:render template="/message/addMessagePuP" model="[usr:usr]"></g:render>--%>
</div>
<div id="mesviewpp">	

</div>	

</body>
</html>